<template>
  <div ref="print"
       class="transport">
    <div v-for="(element, num) in groupData"
         :key="num">
      <h4 style="font-family: 宋体; text-align: center; font-size: 16px; margin-bottom: 15px;">脱普公司</h4>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">发货单位:</label>
          <span style="font-size: 13px; margin-left: 20px;">脱普日用化学品（中国）有限公司</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">单据种类:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.orderCategory }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">本单编号:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.contractNo }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">填单日期:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.dateTop }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">客户代号:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.customerNameTop }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">客户名称:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.consignee.consigneeName }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;"> 联系人:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.toContact.contactName }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-size: 14px; font-weight: bold;">联系电话:</label>
          <span style="font-size: 13px; margin-left: 20px;">{{ form.toContact.contactMobile }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="margin-bottom: 8px; margin: 3px 0; font-size: 14px;">
          <label style="font-size: 14px; font-weight: bold;">收货地址:</label>
          <span style="font-size: 13px;">
            {{ form.toAddress.province }}{{ form.toAddress.city }}{{ form.toAddress.district }}{{ form.toAddress.address }}
          </span>
        </div>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="min-height: 665px; max-height: 700px;">
        <table style="width: 100%; font-size: 11px; table-layout: fixed; border-collapse: collapse; border: none;"
               border="0"
               cellspacing="0"
               cellpadding="0">
          <thead style="line-height: 20px; word-wrap: break-word; word-break: break-word;">
            <tr>
              <th style="width:4%;">序号</th>
              <th style="width:45%;">简称/中文名称</th>
              <th style="width:6%;">箱入数</th>
              <th style="width:15%;">数量</th>
              <th style="width:20%;">单位/条形码</th>
              <th style="width:10%;">收货量</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in element.slice(0, element.length)">
              <tr v-if="item.name"
                  :key="index">
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ num * 10 + (index + 1) }}
                </td>
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.name }}<br />{{ item.chineseName }}
                </td>
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.spc }}
                </td>
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.qty }}
                </td>
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.extendDoc1 }}<br />{{ item.goodsBarCode }}
                </td>
                <td style="height: 40px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 4px; text-align: center; word-break: break-word; line-height: 18px;">
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="3"
                  style="text-align:left; padding-top:20px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 18px;">
                本页小计:
              </td>
              <td colspan="1"
                  style="text-align:center; padding-top:20px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 18px;">
                {{ element[element.length - 1].qty }}件
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="2"
                  style="text-align:left; padding-top:10px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 18px;">
                送货总件数: {{ form.waybillCache.totalQuantity }}件
              </td>
              <td colspan="2"
                  style="padding-top:10px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 18px;">
                总体积：{{ form.waybillCache.calculateVolume }}立方米
              </td>
              <td colspan="2"
                  style="padding-top:10px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 18px;">
                总重量：{{ form.waybillCache.calculateWeight }}公斤
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="min-height: 80px;margin-top:4px;">
        <div style="min-height: 35px; line-height: 22px; font-size: 12px; padding: 5px 0;">
          备注: {{form.desc}}(客户签收时，请注意各项收货数量，如不附注，视为默认收货数量等于送货数量)
        </div>
        <div style="min-height: 22px;margin-top: 6px;overflow: hidden;">
          <span style="float: left;width: 40%; font-size: 12px;">运输公司名称: {{ form.carrier && form.carrier.carrierName }}</span>
          <span style="float: left;width: 30%; font-size: 12px;">运输公司车号:</span>
          <span style="float: left; font-size: 12px;">承运人:</span>
        </div>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="height: 70px; margin: 10px 0;">
        <div style="height: 40px;overflow:hidden;">
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">发货核准</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">复核</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">发货经办</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">制单</span>
          <span style="float: left;width: 18%; font-size: 12px;">客户签收/盖章</span>
        </div>
        <div style="height: 30px;overflow:hidden;">
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;"></span>
        </div>
      </div>
      <div style="line-height: 18px; font-size: 12px; padding: 5px 10px;">
        共五联 第一联：签收联（白）第二联：客户联（红）第三联：财务联（黄）第四联：统计联（绿）第五联：仓库联（蓝）
      </div>
    </div>
  </div>
</template>

<script>
import { transport, top } from "@/api/index";
export default {
  name: "TopOEMPrint",
  props: {
    printParams: Object
  },
  data () {
    return {
      form: {},
      goodsList: [],
      groupData: [],
    };
  },
  computed: {
    waybillId () {
      return this.$route.query?.waybillId || this.printParams?.waybillId
    },
    orderId () {
      return this.$route.query?.orderId || this.printParams?.orderId
    },
  },
  created () {
    this.loadWaybill();
  },
  methods: {
    async loadWaybill () {
      let { data } = await transport.getDetail(this.waybillId);
      this.form = data;
      this.goodsList = data.goodsList.map(item => {
        return {
          ...item,
          name: item.goodsName,
          spc: item.spec,
          qty: item.quantity,
          goodsBarCode: item.barcode,
        }
      });
      this.loadTopOrder();
    },
    async loadTopOrder () {
      let { data } = await top.loadTopOrder({ orderId: this.orderId });
      // let arr = this.goodsList.filter(v => data?.goodsList.some(o => o.goodsId === v.goodsId && o.batchNo === v.batchNo));
      let arr = [];
      if (data) {
        this.form = {
          ...this.form,
          ...data,
          customerNameTop: data?.customerCode,
          dateTop: data?.date ? this.$moment(data.date).format("YYYY-MM-DD") : null
        };

        this.goodsList.map(item => {
          data?.goodsList.map(ele => {
            if (item.goodsId === ele.goodsId && item.batchNo === ele.batchNo) {
              return arr.push({
                ...item,
                chineseName: ele.chineseName,
                extendDoc1: ele.purchaseUnit,
              })
            }
          })
        })
      } else {
        arr = this.goodsList;
      }
      this.groupData = JSON.parse(
        JSON.stringify(this.group(arr, 10))
      );
      this.print();
    },
    group (array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      newArray.forEach(item => {
        // 分页合计
        let qty = 0;
        item.forEach(element => {
          qty += element.qty;
        });
        item.push({ qty });
      });
      return newArray;
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
};
</script>
<style lang="scss" scoped>
@media print {
  .transport {
    page-break-after: always;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
  }
}
@media screen {
  .transport {
    display: none;
  }
}
</style>
